<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="description" content=""/>
    <meta name="keywords" content=""/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <meta content="telephone=no,email=no" name=format-detection>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/js/jquery.js"></script>
    <script src="/js/compatible.js"></script>
    <script src="/js/TouchSlide.1.1.js"></script>
    <style>
        body {
            font-size: 30px;
        }

        .layui-row {
            margin-top: 15px;
        }

        .container {
            width: 750px;
            position: relative;
            overflow: hidden;
            margin: 0 auto;
        }

        .pic-slide {
            width: 750px;
            height: 500px;
            position: relative;
            overflow: hidden;
        }

        .pic-slide .bd ul li {
            position: relative;
            display: block;
            width: 750px;
            height: 500px;
        }

        .pic-slide .bd ul li img {
            width: 750px;
            height: 500px;
        }

        .pic-slide .hd {
            width: 100%;
            height: 15px;
            position: absolute;
            z-index: 1;
            bottom: 30px;
            text-align: center
        }

        .pic-slide .hd ul {
            display: inline-block;
            height: 15px;
            padding: 3px 5px;
            text-align: center
        }

        .pic-slide .hd ul li {
            display: inline-block;
            width: 30px;
            height: 4px;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border-radius: 2px;
            background: #959595;
            margin: 0px 7px;
            vertical-align: top;
            overflow: hidden;
            color: #959595
        }

        .pic-slide .hd ul .on {
            background: #fff;
            color: #fff
        }

        .content {
            width: 95%;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
        }

        .title {
            font-size: 26px;
            font-weight: bold;
            margin-top: 20px;
            line-height: 42px;
        }

        .lmbtn {
            height: 40px;
            line-height: 40px;
            text-align: center;
            background: #ff5500;
            color: #fff;
            display: block;
            padding: 10px;
            border-radius: 10px;
            width: 80%;
            margin: 0 auto;
            border: none;
        }
        .subbtn {
            height: 70px;
            line-height: 70px;
            text-align: center;
            background: #ff5500;
            color: #fff;
            display: block;
            border-radius: 10px;
            width: 90%;
            margin: 0 auto;
            border: none;
        }
        .buy-num {
            position: fixed;
            bottom: 0px;
            height: 300px;
            width: 100%;
            background: #fff;
            border: solid 1px #999;
            z-index: 999;
            border-top-right-radius: 20px;
            border-top-left-radius: 20px;
            display: none;
        }

        .incount {
            width: 40px;
            display: block;
            float: left;
            vertical-align: middle;
        }

        .add, .sub {
            font-size: 42px;
            color: #000;
            cursor: pointer;
            margin-left: 15px;
            background: #999;
            display: block;
            float: left;
            width: 40px;text-align: center;
        }
        .buytxt{padding-left: 15px;}
        .mask{position: absolute; width: 100%; height: 100%; z-index: 8; filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8; background: #000; display: none;}
        .price{color: #ff5500;}
        .stock{font-size: 24px; margin-top: 15px; }
        .bpic{width: 100px; height: 100px; margin-left: 20px;}
        .cls{position: absolute; width: 30px; height: 30px; border-radius: 15px; color: #999; border: solid 1px #999;  z-index: 10; text-align: center;line-height: 30px; right: 10px; top: 10px;}
    </style>
</head>
<body>
<div class="mask"></div>
<div class="container">
    <div class="pic-slide" id="picSlide">
        <div class="hd">
            <ul>
            </ul>
        </div>
        <div class="bd">
            <ul>
                {volist name='piclist' id='p'}
                <li><img src="/uploads/{$p}"/></li>
                {/volist}
            </ul>
        </div>
    </div>
    <script>
        TouchSlide({
            slideCell: "#picSlide",
            titCell: ".hd ul",
            mainCell: ".bd ul",
            effect: "leftLoop",
            autoPlay: true,
            autoPage: true,
            interTime: 5000,
        });
    </script>
    <div class="content">
        <div class="title">{$goods.goods_title}</div>

        <div class="layui-row">
            <div class="layui-col-xs6">
                <div class="grid-demo">{$goods.goods_price}</div>
            </div>
            <div class="layui-col-xs6">
                <div class="grid-demo">销量:{$goods.sale_actual} 库存:{$goods.stock}</div>
            </div>
        </div>

        <div class="layui-row">
            <div class="layui-col-xs6">
                <a class="lmbtn">购物车</a>
            </div>
            <div class="layui-col-xs6">
                <a href="javascript:void(0);" class="lmbtn" onclick="buy({$goods.goods_id})">立即购买</a>
            </div>
        </div>

        <div class="layui-row">
            <div class="layui-col-xs12">
                {$goods.detail|raw}
            </div>
        </div>
    </div>

</div>

<form method="post" action="{:url('buyGoods')}">
<div class="buy-num">
    <div class="cls">×</div>
    <div class="layui-row">
        <div class="layui-col-xs3">
            <img class="bpic" src="/uploads/20231210/7d978d0bd78b2ca6d41c8942013604c325617.jpg"/>
        </div>
        <div class="layui-col-xs9">
            <div class="price">￥<span id="price">{$goods.goods_price}</span></div>
            <div class="stock">库存:{$goods.stock}</div>

        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-xs6">
            <div class="buytxt">购买数量</div>
        </div>
        <div class="layui-col-xs6">
            <div class="grid-demo">
                <input type="hidden" name="id" value="{$goods.goods_id}">
                <input type="hidden" name="price" value="{$goods.goods_price}">
                <input type="text" value="1" name="buynum" class="incount">
                <span class="add">+</span>
                <span class="sub">-</span>
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-xs12">
            <input type="submit" class="subbtn" value="立即购买"/>
        </div>
    </div>
</div>
</form>
<script>
    $(".add").bind("click",function (){
        $(".incount").val(parseInt($(".incount").val())+1);
    })
    $(".sub").bind("click",function (){
        if(parseInt($(".incount").val())>1){
            $(".incount").val(parseInt($(".incount").val())-1);
        }
    })
    function buy(id){
        $(".mask").show();
        $(".buy-num").show();
    }
    $('.cls').click(function (){
        $(".mask").hide();
        $(".buy-num").hide();
    })
</script>
</body>
</html>